import React from 'react';

interface GlassCardProps {
  children: React.ReactNode;
  className?: string;
  /** 是否显示悬停效果 */
  hoverable?: boolean;
  /** 点击事件 */
  onClick?: () => void;
  /** 自定义样式 */
  style?: React.CSSProperties;
}

/**
 * 毛玻璃卡片组件
 * 实现半透明背景、模糊效果和微妙边框的 Glassmorphism 风格
 * Requirements: 8.1, 8.2, 8.3
 */
export const GlassCard: React.FC<GlassCardProps> = ({
  children,
  className = '',
  hoverable = false,
  onClick,
  style,
}) => {
  const baseClasses = `
    bg-white/90 backdrop-blur-md border border-emerald-100 rounded-xl shadow-lg shadow-emerald-500/5 p-6
    transition-all duration-300 ease-out
  `;
  const hoverClasses = hoverable 
    ? 'hover:bg-white hover:border-emerald-200 hover:shadow-xl hover:scale-[1.02] cursor-pointer active:scale-[0.98]' 
    : '';
  
  return (
    <div
      className={`${baseClasses} ${hoverClasses} ${className}`}
      onClick={onClick}
      style={style}
    >
      {children}
    </div>
  );
};

export default GlassCard;
